<template>
    <van-button v-if="value" :loading="loading" class="follow-btn" round size="small" @click="onFollow">已关注</van-button>
    <van-button v-else class="follow-btn" :loading="loading" type="info" color="#3296fa" round size="small" @click="onFollow" icon="plus">关注</van-button>
</template>

<script>
import { getFollow, deleteFollow } from "@/api/user";
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    userId:{
        type:[Number,String,Object],
        required: true,
    }
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    //关注、取消关注
    async onFollow() {
      this.loading = true;
      try {
        if (this.value) {
          await deleteFollow(this.userId);
        } else {
          await getFollow(this.userId);
        }
        this.$emit('input',!this.value)
      } catch (error) {
        let message = "操作失败，请重试！";
        if (error.response && error.response.status === 400) {
          message = "你不能关注你自己";
        }
        this.$toast(message);
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>